<div class="content">
    <div id="example_title">
        <h1>Better Groups</h1>
        It would be more expressive if fields could be defind within the group (and groups within the tabs, if any).
        It would also be easier to read that field names would be keys of the object, for example
        <div style="width: 500px">
        <textarea class="javascript">
fields: {
    "User Info": {
        type: 'group',
        fields: {
            "user.first_name": { label: 'First Name' },
            "user.last_name": { label: 'Last Name' }
        }
    }
    ...
}</textarea>
</div>
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
    <div id="example_title"></div>
        Possible tab properties are:
        <ul>
            <li><b>type</b>: "tab"</li>
            <li><b>style</b> - string, tab style</li>
            <li><b>span</b> - number, (optional), default span for fields inside the tab</li>
            <li><b>column</b> - number, (optional), default column for fields inside the tab</li>
            <li><b>attr</b> - string, (optional), default attr for fields inside the tab</li>
            <li><b>label</b> - string, (optional), default label for fields inside the tab</li>
            <li><b>text</b> - string, (optional), default text for fields inside the tab</li>
        </ul>
        Possible group properties are:
        <ul>
            <li><b>type</b>: "group"</li>
            <li><b>style</b> - string, group style</li>
            <li><b>titleStyle</b> - string, group title style</li>
            <li><b>collapsible</b> - boolean, if group is collapsible</li>
            <li><b>span</b> - number, (optional), default span for fields inside the group</li>
            <li><b>column</b> - number, (optional), default column for fields inside the group</li>
            <li><b>page</b> - number, (optional), default page for fields inside the group</li>
            <li><b>attr</b> - string, (optional), default attr for fields inside the group</li>
            <li><b>label</b> - string, (optional), default label for fields inside the group</li>
            <li><b>text</b> - string, (optional), default text for fields inside the group</li>
        </ul>
    </div>
</div>

<!--CODE-->
<div id="form" style="width: 750px;"></div>
<br>

<!--CODE-->
<script type="module">
import { w2form, w2ui, w2popup, w2alert } from '__W2UI_PATH__'

let form = new w2form({
    box: '#form',
    name: 'form',
    header: 'Auto-Generated Form',
    url: 'server/post',
    fields: {
        "Info": {
            type: 'tab',
            span: 5,
            // text: '111',
            fields: {
                "User Info": {
                    type: 'group',
                    attr: 'style="width: 300px"',
                    // text: '222',
                    fields: {
                        "user.first_name": {
                            type: 'text',
                            required: true,
                            label: 'First Name'
                        },
                        "user.last_name": {
                            type: 'text',
                            required: true,
                            label: 'Last Name'
                        }
                    }
                }
            }
        },
        "KPIs": {
            type: 'tab',
            fields: {
                "All KPIs": {
                    type: 'group',
                    attr: 'style="width: 200px"',
                    span: 4,
                    fields: {
                        "kpi.param1": {
                            type: 'int',
                            required: false,
                            label: 'Param 1'
                        },
                        'kpi.param2': {
                            type: 'int',
                            required: false,
                            label: 'Param 2'
                        }
                    }
                },
                "Other KPIs": {
                    type: 'group',
                    span: 4,
                    fields: {
                        "kpi.param3": {
                            type: 'int',
                            required: false,
                            label: 'Param 3'
                        },
                        'kpi.param4': {
                            type: 'int',
                            required: false,
                            label: 'Param 4'
                        }
                    }
                }
            }
        }
    },
    actions: {
        Reset(event) {
            this.clear()
        },
        Save(event) {
            if (w2ui.form.validate().length == 0) {
                w2popup.open({
                    title: 'Form Data',
                    with: 600,
                    height: 550,
                    body: `<pre>${JSON.stringify(this.getCleanRecord(), null, 4)}</pre>`,
                    actions: { Ok: w2popup.close }
                })
            }
        }
    }
})
</script>